<template>
    <div class="recommendSongs">
        <div class="songItem">
            <div class="left" v-if="isPlayIcon" @click="changeAudioId(songDatas)">
                <div class="img">
                    <img class="auto-img" :src="songDatas.al.picUrl" alt="">
                </div>
                <div class="songName-singerName">
                    <div class="songName">{{ songDatas.al.name }}</div>
                    <div class="singerName">{{ songDatas.ar[0].name }}</div>
                </div>
            </div>
            <div class="right" @click="goLikeSong">
                <van-icon name="like" :color="isLikeSong ? '#e4393c' : '#C4C4C4'" size="23" />
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { mapMutations, mapState } from 'vuex';
export default {
    name: "RecommendSongs",
    data() {
        return {
            isLikeSong: false
        }
    },
    props: {
        songDatas: {
            type: Object,
            default() {
                return {}
            }
        },
        //控制播放图标的显示和隐藏
        isPlayIcon: {
            type: Boolean,
            default: false
        },

    },
    created() {
        this.findLikeSong()
         
    },
    computed: {
        ...mapState(['currentAudioInfo', '$audio', 'isPlay'])
    },
    methods: {

        ...mapMutations(['setAudioId']),

        goLikeSong() {
            let loginInfo = window.localStorage.getItem('loginInfo')
            if (loginInfo) {
                let loginInfo2 = JSON.parse(loginInfo)
                if (loginInfo2.length !== 0) {
                    this.isLikeSong = !this.isLikeSong
                    this.$emit('getLikeSongs', this.isLikeSong, this.songDatas)
                } else {
                    Toast('登录后收藏')
                this.$router.push({ name: "GoLogin" })
                }
            } else {
                Toast('登录后收藏')
                this.$router.push({ name: "GoLogin" })
            }




        },
        // 查看是否收藏歌单
        findLikeSong() {
            let loginInfo = window.localStorage.getItem('loginInfo')
            let goLikeSong = window.localStorage.getItem('likeSong')
            if (loginInfo) {
                let loginInfo2 = JSON.parse(loginInfo)
                if (loginInfo2.length !== 0) {
                    if (goLikeSong) {
                        let goLikeSong2 = JSON.parse(goLikeSong)
                          
                        for (let i = 0; i < goLikeSong2.length; i++) {
                            if (goLikeSong2[i].al.id === this.songDatas.al.id) {
                                this.isLikeSong = true
                            }
                        }
                    }
                }
            }
        },

        //修改音频id
        changeAudioId() {

            //   

            //判断当前音频的id是否和点击播放的音频id一致
            if (this.currentAudioInfo.audioId === this.songDatas.id) {
                  

                if (this.isPlay) {
                    //暂停音频
                    this.$audio.pause();
                } else {
                    //播放音频
                    this.$audio.play();
                }

            } else {
                //设置新的音频id
                //vuex, 修改音频id
                this.setAudioId({
                    audioId: this.songDatas.id,
                    singerName: this.songDatas.ar[0].name,
                    songName: this.songDatas.al.name,
                    singerPic: this.songDatas.al.picUrl,
                    // singerId:this.songData.ar[0].id
                });
            }

        },
    }
}
</script>

<style lang="less" scoped>
.songItem {
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        width: 85%;
        display: flex;
        align-items: center;

        .songName-singerName {

            margin-left: 10px;

            .singerName {
                margin: 5px 0px;
            }
        }
    }

    .img {
        border-radius: 5px;
        width: 50px;
        height: 50px;
    }
}

.right {
    width: 25px;
    height: 25px;
}
</style>